<template>
	<view class="container">
		<weiNoData :visible="isNoData"></weiNoData>
		<block v-for="(item, index) in dataList" :key="index">
			<tui-list-cell @click="detail(item.member_id,item.user_name)" :last="true">
				<view class="tui-msg-box">
					<image :src="$cdn.appAvatar + item.head_pic" class="tui-msg-pic" mode="widthFix"></image>
					<view class="tui-msg-item">
						<view class="tui-msg-name">{{ item.user_name }}</view>
						<view class="tui-msg-content">{{ item.content }}</view>
					</view>
				</view>
				<view class="tui-msg-right" :class="[item.level == 3 ? 'tui-right-dot' : '']">
					<view class="tui-msg-time">222</view>
					<tui-badge :type="item.read_state == 1 ? 'gray' : 'danger'" :dot="item.read_state == 1 ? false : false" v-if="item.read_state == 0">.</tui-badge>
				</view>
			</tui-list-cell>
		</block>
		<view class="tui-safearea-bottom"></view>
		
		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import tuiIcon from '@/components/icon/icon';
import tuiBadge from '@/components/badge/badge';
import tuiListCell from '@/components/list-cell/list-cell';
import weiNoData from '@/components/wei-nodata/wei-nodata.vue';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiTips from '@/components/tips/tips';
export default {
	components: {
		tuiIcon,
		tuiBadge,
		tuiListCell,
		weiNoData,
		tuiLoadmore,
		tuiNomore,
		tuiTips
	},
	data() {
		return {
			$cdn: this.$cdn,
			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,

			dataList: [],

			msgList: [
				{
					nickname: '波动星球',
					pic: 'avatar_1',
					msg: '兰家双臂初长成！',
					msgNum: 2,
					time: '10:22',
					level: 1
				}
			]
		};
	},
	onLoad: function(e) {
		this.pageData(1, false, {});
	},
	methods: {
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
				let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options);
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 获取
		pageData(pageIndex, isRefresh, postData) {
			this.tui
				.request(this.$api.pageToMyMsg + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize, postData, 'POST', false, pageIndex == 1 && !isRefresh ? false : true)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						// 如无数据
						if (res.data.total == 0) {
							this.isNoData = true;
							// 加return 让后面nomore不展示【没有更多了】
							return;
						}

						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}

						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		detail: function(memberIdTo,userName) {
			uni.navigateTo({
				url: 'chat?memberIdTo='+memberIdTo+'&userName='+userName
			});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 下拉重置页码为第一页
		this.pageIndex = 1;
		this.pageData(this.pageIndex, true, {});
		// 允许下拉和加载更多
		this.pullUpOn = true;
		this.loadding = false;
		// 拉新数据前，先隐藏
		this.isNoData = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.pageData(++this.pageIndex, false, {});
	}
};
</script>

<style>
page {
	background: #f5f6fa;
}

.container {
	padding-bottom: 0upx;
}

/*tabbar*/

.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background: #fff;
	height: 100upx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-tabbar::before {
	content: '';
	width: 100%;
	border-top: 1upx solid #d2d2d2;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-tabbar-item {
	flex: 1;
	width: 25%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	font-size: 24upx;
	color: #666;
	height: 80upx;
}

.tui-ptop-4 {
	padding-top: 4upx;
}

.tui-scale {
	font-weight: bold;
	transform: scale(0.8);
	transform-origin: center 100%;
	line-height: 30upx;
}

.tui-item-active {
	color: #00c0fb !important;
}

/*tabbar*/

/*searchbox*/

.tui-searchbox {
	width: 100%;
	height: 100upx;
	padding: 0 30upx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.tui-search-input {
	width: 100%;
	height: 72upx;
	background: #f5f6fa;
	border-radius: 36upx;
	font-size: 30upx;
	color: #a8abb8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-search-text {
	padding-left: 16upx;
}

/*searchbox*/

.tui-msg-box {
	display: flex;
	align-items: center;
}

.tui-msg-pic {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	display: block;
	margin-right: 24upx;
}

.tui-msg-item {
	max-width: 500upx;
	min-height: 80upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tui-msg-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34upx;
	line-height: 1;
	color: #262b3a;
}

.tui-msg-content {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 28upx;
	line-height: 1;
	color: #9397a4;
}

.tui-msg-right {
	max-width: 120upx;
	height: 88upx;
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
	height: 76upx;
	padding-bottom: 10upx;
}

.tui-msg-time {
	width: 100%;
	font-size: 24upx;
	line-height: 24upx;
	color: #9397a4;
}

.tui-badge {
	width: auto;
}
</style>
